<template>
  <view class="bg">
    <view class="container">
      <view class="head">
        <view class="left">
          <view class="label">您当前可用积分(分)</view>

          <view class="num">{{ assets.credit }}</view>
        </view>
        <view class="right" @click="handleToSub">
          <image class="log-btn" src="../static/log-btn@2x.png" mode="aspectFit"></image>
          <div class="text">
            <div class="label">积分明细</div>
            <uni-icons class="icon" type="right" size="12" color="#fff"></uni-icons>
          </div>
        </view>
      </view>

      <view class="list">
        <view class="list-nav" v-if="appendData">
          <view class="list-nav-item" v-for="(item, index) in appendData" :key="index" @click="handleChoose(item.status)" :class="{ active: item.status === orderStatus }">
            <view class="text">
              {{ item.statusDesc }}
              <template v-if="item.count > 0">
                ({{ item.count }})
              </template>
            </view>
          </view>
        </view>
        <template v-if="list && list.length > 0">
          <view class="item" v-for="(item, index) in list" :key="index">
            <view class="left">
              <view class="productCoverUrl"><image class="icon" :src="item.productCoverUrl" mode="aspectFit"></image></view>
              <view class="info">
                <view class="title">{{ item.productName }}</view>
                <view class="time">
                  <image class="icon-time" src="@/static/images/index/icon-time@2x.png" mode="aspectFit"></image>
                  <view>{{ item.createTime }}</view>
                </view>
                <view class="record-num">-{{ item.payCost }}分</view>
              </view>
            </view>
            <view class="right">
              <view class="qrcode" v-if="item.orderStatus === 0" @click="handleOpenQRcode(item.orderSn)">
                <image class="pic" src="../static/qrcode-icon@2x.png" mode="aspectFit"></image>
                <view class="text">查看兑换码</view>
              </view>
              <view class="written-off" v-if="item.orderStatus === 1"><image class="pic" src="../static/written-off@2x.png" mode=""></image></view>
            </view>
          </view>
        </template>
        <template v-else>
          <div
            class="no-data"
            v-if="!isloading"
            style="display: flex;justify-content: center;align-items: center;flex-direction: column;padding-top: 180rpx;padding-bottom: 180rpx;"
          >
            <image style="width: 444rpx;height: 288rpx;" src="../static/no-data@2x.png" mode="aspectFit"></image>
            <div style="font-size: 36rpx;color: #999;padding-top: 60rpx;" class="text">暂无数据</div>
          </div>
        </template>
      </view>
    </view>

    <!-- 弹窗 -->
    <uni-popup ref="popup">
      <view class="popup-content">
        <view class="popup-qrcode">
          <image class="qrcode-bg" src="../static/qrcode-bg@2x.png" mode="aspectFit"></image>
          <view class="info">
            <div class="title">兑换码</div>
            <image class="exchangeCodeUrl" :src="qrcode.exchangeCodeUrl" mode="aspectFit"></image>
            <view class="qrcode-num">{{ qrcode.exchangeCode }}</view>
            <view class="qrcode-text">请出示此二维码或者数字给店员</view>
          </view>
          <div class="close" @click="handleCloseQRCode">我知道了</div>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { creditOrderSearchList, getExchangeInfo } from '@/api/shop.js';
import { memberAsset } from '@/api/member.js';
export default {
  data() {
    return {
      appendData: [],
      assets: {},
      list: [],
      qrcode: {},
      isloading: false,
      orderStatus: null,
      total: 0,
      pages: {
        start: 1,
        limits: 10
      }
    };
  },
  onShow() {
    this.getMemberAsset();
    this.getCreditOrderSearchList();
    this.list = [];
    this.isloading = false;
    this.orderStatus = null;
    this.total = 0;
    this.pages = {
      start: 1,
      limits: 10
    };
  },
  onReachBottom() {
    if (this.pages.start * this.pages.limits >= this.total) return this.$modal.msg('数据加载完毕!');

    if (this.isloading) return;

    // 让页码值自增+1
    this.pages.start++;
    this.getCreditOrderSearchList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.list = [];
    this.isloading = true;
    this.total = 0;
    this.pages = {
      start: 1,
      limits: 10
    };
    this.getCreditOrderSearchList();

    this.$nextTick(() => {
      setTimeout(() => {
        uni.stopPullDownRefresh();
        this.isloading = false;
      }, 500);
    });
  },
  methods: {
    getCreditOrderSearchList() {
      const data = {
        orderStatus: this.orderStatus,
        ...this.pages
      };
      this.isloading = true;
      creditOrderSearchList(data).then(res => {
        const appendDatas = res.appendData.orderCount.sort(this.compare('status'));
        appendDatas.map(res => {
          if (res.status === -1) {
            return (res.status = null);
          }
        });
        this.appendData = appendDatas;
        this.total = res.total;
        this.list = res.rows ? this.list.concat(res.rows) : [];
        this.isloading = false;
      });
    },
    // 排序法
    compare(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
    getMemberAsset() {
      memberAsset().then(res => {
        this.assets = res.data;
      });
    },
    // 选择分类
    handleChoose(opt) {
      this.list = [];
      this.total = 0;
      this.pages = {
        start: 1,
        limits: 10
      };
      this.orderStatus = opt;
      this.getCreditOrderSearchList();
    },
    // 关闭码
    handleCloseQRCode() {
      this.$refs.popup.close();
    },
    // 弹出码
    handleOpenQRcode(orderSn) {
      this.qrcode = {};
      this.$refs.popup.open('center');
      this.fetchGetExchangeInfo(orderSn);
    },
    fetchGetExchangeInfo(orderSn) {
      const data = {
        orderSn
      };
      getExchangeInfo(data).then(res => {
        this.qrcode = res.data;
      });
    },
    // 去积分记录
    handleToSub() {
      this.$tab.navigateTo('/pagesA/record/index');
    }
  }
};
</script>

<style lang="scss">
.bg {
  min-height: 100vh;
  background: #fff;
}

.container {
  padding: 20rpx 0;
  line-height: inherit;
  background: linear-gradient(180deg, #1e60ff 0%, rgba(30, 96, 255, 0) 100%);
  background-size: 100% 416rpx;
  background-repeat: no-repeat;
  width: 100%;
  background-attachment: fixed;

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .left {
      margin-left: 24rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .label {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .num {
        margin-top: 4rpx;
        font-size: 80rpx;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #ffffff;
      }
    }

    .right {
      position: relative;
      width: 194rpx;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .log-btn {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 194rpx;
        height: 88rpx;
      }

      .text {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9rpx;
        width: 194rpx;
        height: 88rpx;
        z-index: 1;

        .label {
          margin-left: 10rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 1;
        }

        .icon {
          font-weight: 600;
        }
      }
    }
  }

  .list {
    width: 100%;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(238, 238, 238, 0.5);
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    box-sizing: border-box;

    &-nav {
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #e5edff;
      border-radius: 24rpx 24rpx 0rpx 0rpx;

      &-item {
        padding: 26rpx 0 22rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #111111;
        border-bottom: 6rpx solid #e5edff;

        &.active {
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #1e60ff;
          border-bottom: 6rpx solid #1e60ff;
        }
      }
    }

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx;
      margin-bottom: 24rpx;
      border-bottom: 2rpx solid #eeeeee;

      .left {
        display: flex;
        align-items: center;

        .productCoverUrl {
          margin-right: 16rpx;
          min-width: 128rpx;
          min-height: 128rpx;
          background: #d8d8d8;
          border: 2rpx solid #eeeeee;

          .icon {
            width: 128rpx;
            height: 128rpx;
          }
        }

        .info {
          .title {
            margin-bottom: 11rpx;
            font-size: 28rpx;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #111111;
            line-height: 1;
          }

          .time {
            margin-bottom: 15rpx;
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 1;

            .icon-time {
              margin-right: 8rpx;
              width: 24rpx;
              height: 24rpx;
            }
          }

          .record-num {
            font-size: 36rpx;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #41bd4a;
            line-height: 1;
          }
        }
      }

      .right {
        display: flex;
        min-width: 130rpx;
        justify-content: flex-end;

        .qrcode {
          .pic {
            display: block;
            width: 64rpx;
            height: 64rpx;
            margin: 0 auto;
          }

          .text {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #111111;
          }
        }

        .written-off {
          .pic {
            display: block;
            width: 100rpx;
            height: 100rpx;
            margin: 0 auto;
          }
        }
      }
    }
  }
}

.popup-content {
  width: 560rpx;
  height: 796rpx;

  .popup-qrcode {
    position: relative;
    width: 560rpx;
    height: 796rpx;

    .qrcode-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 100%;
    }

    .info {
      position: relative;
      padding: 32rpx 0 64rpx;
      text-align: center;
      z-index: 9;

      .title {
        font-size: 36rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #111111;
      }

      .exchangeCodeUrl {
        height: 470rpx;
      }

      .qrcode {
        width: 400rpx;
        height: 400rpx;
      }

      .qrcode-num {
        margin-bottom: 16rpx;
        font-size: 56rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #111111;
        line-height: 1;
        letter-spacing: 1rpx;
      }

      .qrcode-text {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 1;
      }
    }

    .close {
      position: relative;
      font-size: 36rpx;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #1e60ff;
      line-height: 1;
      text-align: center;
      z-index: 9;
    }
  }
}
</style>
